// 步骤
// 1. 请求时数据
// 2. 渲染页面
// 3.1 绑定拖动事件
// 3.2 传递数据把产品数据带过去
// 4. 在购物里去创建记录

// 请求数据
function getPhoneList() {
	var url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
	var data = '';
//		getAjax(url, data, function(res) {
	// 临时调试代码,完成后删除
	var res = { "data": { "list": [{ "id": "1001", "prdName": "苹果 iPhoneX", "price": "5748.00", "disc": "5.8寸屏全面屏吃鸡手机", "store": "我就爱购数码专营店", "imgUrl": "https://img.alicdn.com/imgextra/i1/15381762/TB2CKXNlCYH8KJjSspdXXcRgVXa_!!0-saturn_solar.jpg_220x220.jpg" }, { "id": "1002", "prdName": "苹果 iPhone 8", "price": "4788.00", "disc": "全网通4G版 智能手机正品", "store": "绿森数码官方旗舰店", "imgUrl": "https://img.alicdn.com/imgextra/i3/13022581/TB2RNi9myQnBKNjSZFmXXcApVXa_!!0-saturn_solar.jpg_220x220.jpg" }, { "id": "1003", "prdName": "苹果Phone8Plus", "price": "3398.00", "disc": "港版三网4G秒发货", "store": "新园通讯数码", "imgUrl": "https://img.alicdn.com/imgextra/i3/117506104/TB2g3WmAQCWBuNjy0FaXXXUlXXa_!!0-saturn_solar.jpg_220x220.jpg" }] } };

	var list = res.data.list;
	// 渲染页面
	var htmlStr = '';
	var item;
	for(var i = 0; i < list.length; i++) {
		item = list[i];
		htmlStr += `
				<li draggable="true" ondragstart="dragstart();";
					class="item mg-bottom-10" draggable="true"
					data-price="${Number(item.price).toFixed(2)}"
					data-disc="${item.disc}"
					data-id="${item.id}"
					data-store="${item.store}"
					data-prdName="${item.prdName}"
					>
					<div class="img-box">
						<img class="img" src="${item.imgUrl}" />
					</div>
					<p class="price">¥ ${Number(item.price).toFixed(2)} 包邮</p>
					<p class="disc">${item.prdName} ${item.disc}</p>
					<p class="store">${item.store}</p>
				</li>
			`;
	}
	document.getElementById('prdList').innerHTML = htmlStr;
//		});
}

getPhoneList();

// 商品的拖动事件

function dragstart() {
	// 获取拖动的元素
	var target = event.currentTarget;
	// 用dataset 收集数据
	//	console.log(target.dataset);
	var str = JSON.stringify(target.dataset);
	console.log(str);
	// 传递数据 
	event.dataTransfer.setData('prdObj', str);
}

// 购物车移入,放下drop事件
var shoppingCarEl = document.getElementById('shoppingCar');
shoppingCarEl.ondragenter = function() {
	console.log('手放开');
	// todo
}

shoppingCarEl.ondragover = function() {
	// 阻止默认事件
	event.preventDefault();
}
// 放下drop事件
var orderListEl = document.getElementById('orderList');
var empty = document.getElementById('empty');
shoppingCarEl.ondrop = function() {
	empty.style.display = 'none';
	event.preventDefault();
	// 接收拖动元素传递过来的数据
	var str = event.dataTransfer.getData('prdObj');
	var prdObj = JSON.parse(str);
	//	console.log(prdObj);
	// 获取拖过来的产品的id
	var id = prdObj.id;
	// 根据id查找是否#orderList下是否已经创建了li
	var liEl = document.querySelector(`#orderList [data-id="${id}"]`);
	// li已经创建,不再创建
	if(liEl) {
		// 获取购买数量,每次拖动就 +1
		var num = Number(liEl.dataset.num) + 1;
		// 总价
		var totalMoney = prdObj.price * num;
		// 给li添加自定义 id属性
		liEl.dataset.id = prdObj.id;
		// 给li添加自定义num属性
		liEl.dataset.num = num;
		// 填充新的内容
		liEl.innerHTML = `
		<span class="prd">${prdObj.prdname} ${prdObj.disc} x${num}</span>
		<span class="fr total">￥ ${totalMoney.toFixed(2)}</span>`;
	} else {
		// 第一次拖过来的商品
		var totalMoney = prdObj.price;
		var li = document.createElement('li');
		li.className = 'order';
		li.dataset.id = prdObj.id;
		li.dataset.num = 1;
		li.innerHTML = `
		<span class="prd">${prdObj.prdname} ${prdObj.disc} x1</span>
		<span class="fr total">￥ ${totalMoney.toFixed(2)}</span>`;
		orderListEl.appendChild(li);
	}
}